<template>
  <d2-container>
    <div class="flex-1 ml-2 mt-3">
      <div class="flex-1 row-ac">
        <div class="row-ac">
          <div class="font-s-2 text-light-grey mr-1">订单查询</div>
          <div>
            <el-input size="mini" v-model="queryInfo.order_number" placeholder="请输入订单"></el-input>
          </div>
        </div>
        <div class="row-ac ml-5">
          <div class="">
            <el-date-picker size="mini" v-model="getDate" type="date" placeholder="选择日期" />
          </div>
        </div>
        <div class="ml-2">
          <el-button size="mini" type="primary" @click="clickQuery">查询</el-button>
        </div>
      </div>
    </div>
    <div class="flex-1 ml-2 mt-5">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="first">
          <el-table :data="orderList" border stripe>
            <el-table-column type="expand" width="30">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="订单编号">
                      <span>{{ props.row.order_number }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                      <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="订单ID">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.consignee }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone }}</span>
                    </el-form-item>
                    <el-form-item label="收货地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="下单时间">
                      <span>{{ props.row.created_time }}</span>
                    </el-form-item>
                    <el-form-item label="付款状态">
                      <template slot-scope="scope">
                        <el-tag v-if="props.row.is_paid == false " size="mini" type="danger" effect="dark">未付款</el-tag>
                        <el-tag v-if="props.row.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
                      </template>
                    </el-form-item>
                    <el-form-item label="发货状态" v-if="props.row.paid == true">
                      <el-tag v-if="props.row.freight_stata == false" type="danger">未发货</el-tag>
                      <el-tag v-if="props.row.freight_stata == true" type="success">已发货</el-tag>
                    </el-form-item>
                    <el-form-item label="开具发票">
                      <el-tag v-if="props.row.is_bill == false" type="success">不开发票</el-tag>
                      <el-tag v-if="props.row.is_bill == true" type="danger">开发票</el-tag>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="订单编号" prop="order_number" width="80" />
            <el-table-column align="center" label="订单总价" prop="order_amount" width="70" />
            <el-table-column align="center" label="下单时间" prop="created_time" width="110" />
            <el-table-column align="center" label="付款状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_paid == false" size="mini" type="danger" effect="dark">未付款</el-tag>
                <el-tag v-if="scope.row.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="primary"
                  v-if="scope.row.is_paid == true && scope.row.freight_stata == false"
                  @click="sendOut(scope.row)">去发货</el-button>
                <el-button size="mini" type="success" v-if="scope.row.freight_stata == true"
                  @click="sendOutDetail(scope.row)">发货详情</el-button>
                <el-button size="mini" @click="modifyOrder(scope.row)">修改订单</el-button>
                <el-button size="mini" type="primary" @click="printOrder(scope.row.id)">打印</el-button>
                <el-button size="mini" type="danger" v-if="scope.row.is_paid == false"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已付款" name="isPaid">
          <el-table :data="orderList" border stripe>
            <el-table-column type="expand" width="30">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="订单编号">
                      <span>{{ props.row.order_number }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                      <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="订单ID">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.consignee }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone }}</span>
                    </el-form-item>
                    <el-form-item label="收货地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="下单时间">
                      <span>{{ props.row.created_time }}</span>
                    </el-form-item>
                    <el-form-item label="付款状态">
                      <template slot-scope="scope">
                        <el-tag v-if="props.row.is_paid == false" size="mini" type="danger" effect="dark">未付款</el-tag>
                        <el-tag v-if="props.row.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
                      </template>
                    </el-form-item>
                    <el-form-item label="发货状态" v-if="props.row.is_paid == true">
                      <el-tag v-if="props.row.freight_stata == false" type="danger">未发货</el-tag>
                      <el-tag v-if="props.row.freight_stata == true" type="success">已发货</el-tag>
                    </el-form-item>
                    <el-form-item label="开具发票">
                      <el-tag v-if="props.row.is_bill == false" type="success">不开发票</el-tag>
                      <el-tag v-if="props.row.is_bill == true" type="danger">开发票</el-tag>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="订单编号" prop="order_number" width="80" />
            <el-table-column align="center" label="订单总价" prop="order_amount" width="70" />
            <el-table-column align="center" label="下单时间" prop="created_time" width="110" />
            <el-table-column align="center" label="付款状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_paid == false" size="mini" type="danger" effect="dark">未付款</el-tag>
                <el-tag v-if="scope.row.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="primary"
                  v-if="scope.row.is_paid == true && scope.row.freight_stata == false"
                  @click="sendOut(scope.row)">去发货</el-button>
                <el-button size="mini" type="success" v-if="scope.row.freight_stata == true"
                  @click="sendOutDetail(scope.row)">发货详情</el-button>
                <el-button size="mini" @click="modifyOrder(scope.row)">修改订单</el-button>
                <el-button size="mini" type="danger" v-if="scope.row.is_paid == false"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="未发货" name="freightStata">
          <el-table :data="orderList" border stripe>
            <el-table-column type="expand" width="30">
              <template slot-scope="props">
                <div class="flex-1 mx-3">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="订单编号">
                      <span>{{ props.row.order_number }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                      <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="订单ID">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="联系人">
                      <span>{{ props.row.consignee }}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                      <span>{{ props.row.phone }}</span>
                    </el-form-item>
                    <el-form-item label="收货地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="下单时间">
                      <span>{{ props.row.created_time }}</span>
                    </el-form-item>
                    <el-form-item label="付款状态">
                      <template slot-scope="scope">
                        <el-tag v-if="props.row.is_paid == false" type="danger" effect="dark">未付款</el-tag>
                        <el-tag v-if="props.row.is_paid == true" type="success" effect="dark">已付款</el-tag>
                      </template>
                    </el-form-item>
                    <el-form-item label="发货状态" v-if="props.row.paid == true">
                      <el-tag v-if="props.row.freight_stata == false" type="danger">未发货</el-tag>
                      <el-tag v-if="props.row.freight_stata == true" type="success">已发货</el-tag>
                    </el-form-item>
                    <el-form-item label="开具发票">
                      <el-tag v-if="props.row.is_bill == false" effect="dark" type="success">不开发票</el-tag>
                      <el-tag v-if="props.row.is_bill == true" effect="dark" type="danger">开发票</el-tag>
                    </el-form-item>
                  </el-form>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="订单编号" prop="order_number" width="80" />
            <el-table-column align="center" label="订单总价" prop="order_amount" width="70" />
            <el-table-column align="center" label="下单时间" prop="created_time" width="110" />
            <el-table-column align="center" label="付款状态" prop="is_paid" width="70">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_paid == false" size="mini" type="danger" effect="dark">未付款</el-tag>
                <el-tag v-if="scope.row.is_paid == true" size="mini" type="success" effect="dark">已付款</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" type="primary"
                  v-if="scope.row.is_paid == true && scope.row.freight_stata == false"
                  @click="sendOut(scope.row)">去发货</el-button>
                <el-button size="mini" type="success" v-if="scope.row.freight_stata == true"
                  @click="sendOutDetail(scope.row)">发货详情</el-button>
                <el-button size="mini" @click="modifyOrder(scope.row)">修改订单</el-button>
                <el-button size="mini" type="danger" v-if="scope.row.is_paid == false"
                  @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div class="flex-1 ml-2 mt-2">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="orderTotal">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogSendOutVisible" width="50%">
      <div class="flex-1 mx-2">
        <div class="flex-1 pb-3">
          <div class="flex-1 d-f">
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">订单号:</div>
              <div class="font-s-2  ">{{ orderDetail.order_number }}</div>
            </div>
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">下单时间:</div>
              <div class="font-s-2  ">{{ orderDetail.created_time }}</div>
            </div>
          </div>
          <div class="flex-1 d-f mt-1">
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">订单金额:</div>
              <div class="font-s-2  ">￥{{ orderDetail.order_amount }}</div>
            </div>
            <div class="row-ac flex-1">
              <div class="font-s-2 text-light-grey row-ac" style="width: 88px;">是否开票:</div>
              <div class="font-s-2">
                <el-tag v-if="orderDetail.is_bill == false" type="success">不开发票</el-tag>
                <el-tag v-if="orderDetail.is_bill == true" type="danger">开发票</el-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="font-s-2 font-w pb-2">订单商品</div>
        <el-table :data="orderDetail.items" stripe>
          <el-table-column label="图片" prop="product" width="60">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover"
                v-if="scope.row.product.image_list && scope.row.product.image_list !== '' && scope.row.product.image_list[0]">
                <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.product.image_list[0].url"
                  fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="scope.row.product.image_list[0].url"
                  fit="contain" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" prop="product.product_name" width="220" />
          <el-table-column align="center" label="订单数量" prop="quantity" width="60" />
        </el-table>
      </div>
      <div class="flex-1 mx-2 py-2">
        <div class="flex-1 pb-2">收货信息</div>
        <div class="pb-2 flex-1 d-f">
          <div class="d-f">
            <div class="font-s-2">收货人: {{ orderDetail.consignee }}</div>
          </div>
          <div class="d-f ml-2">
            <div class="font-s-2">联系电话: {{ orderDetail.phone }}</div>
          </div>
          <div class="d-f ml-2">
            <div class="font-s-2">收货地址: {{ orderDetail.address }}</div>
          </div>
        </div>
        <div class="flex-1 pb-2">快递信息</div>
        <div class="flex-1 row-ac">
          <div style="width: 30%;">
            <el-select v-model="formSendOut.freight_company" placeholder="选择快递">
              <el-option v-for="item in freightCompany" :key="item.value" :label="item.name"
                :value="item.name"></el-option>
            </el-select>
          </div>
          <div style="width: 50%;">
            <el-input v-model="formSendOut.freight_number" placeholder="请输入快递单号"></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="sendOutStatus" @click="dialogSendOutVisible = false">取 消</el-button>
        <el-button v-if="!sendOutStatus" @click="dialogSendOutVisible = false">关 闭</el-button>
        <el-button v-if="sendOutStatus" type="primary" @click="sendOutGoods(orderDetail.id)">确 定</el-button>
        <el-button v-if="!sendOutStatus" type="primary" @click="sendOutGoods(orderDetail.id)">修 改</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogModifyVisible" width="50%">
      <div class="flex-1 mx-2">
        <div class="flex-1 pb-2 d-f">
          <div class="row-ac flex-1">
            <div class="font-s-2 text-light-grey row-ac" style="width: 78px;">订单号:</div>
            <div class="font-s-2 ">{{ getOrderDetail.order_number }}</div>
          </div>
          <div class="row-ac flex-1 mt-1">
            <div class="font-s-2 text-light-grey row-ac" style="width: 78px;">下单时间:</div>
            <div class="font-s-2 ">{{ getOrderDetail.created_time }}</div>
          </div>
        </div>
        <div class="flex-1">
          <el-form :model="formModify" label-width="100px" ref="form">
            <div>
              <el-form-item prop="is_paid" label="是否支付">
                <el-switch v-model="formModify.is_paid"></el-switch>
              </el-form-item>
            </div>
            <div v-if="formModify.is_paid">
              <el-form-item prop="payment_method" label="支付方式">
                <el-select v-model="formSendOut.payment_method" placeholder="支付方式">
                  <el-option v-for="item in paymentMethod" :key="item.value" :label="item.name"
                    :value="item.name"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="订单金额" prop="order_amount">
                <el-input-number v-model="formModify.order_amount" :precision="2" :min="0"
                  :step="0.01"></el-input-number>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="优惠金额" prop="discount">
                <el-input-number v-model="formModify.discount" :precision="2" :min="0" :step="0.01"></el-input-number>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="收货人" prop="consignee">
                <el-input v-model="formModify.consignee" placeholder="收货人"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%;">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formModify.phone" placeholder="联系电话"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="收货地址" prop="address">
                <el-input v-model="formModify.address" placeholder="收货地址"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogModifyVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyOrderPatch(getOrderDetail.id)">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    orderListUrl,
    orderDeleteUrl,
    orderDetailUrl,
    orderPatchUrl
  } from "@/utils/order"
  export default {
    data() {
      return {
        queryInfo: {
          is_paid: '',
          freight_stata: '',
          date: '',
          order_number: '',
          page: 1,
          pageSize: 10
        },
        orderList: [],
        orderTotal: 1,
        activeName: 'first',
        getDate: '',
        dialogSendOutVisible: false,
        sendOutStatus: true,
        orderDetail: '',
        formSendOut: {
          freight_stata: true,
          freight_company: '',
          freight_number: ''
        },
        freightCompany: [{
            value: 1,
            name: '邮政快递'
          },
          {
            value: 2,
            name: 'EMS'
          },
          {
            value: 3,
            name: '顺丰速递'
          },
          {
            value: 4,
            name: '申通快递'
          },
          {
            value: 5,
            name: '圆通快递'
          },
          {
            value: 6,
            name: '中通快递'
          },
          {
            value: 7,
            name: '韵达快递'
          },
          {
            value: 8,
            name: '极兔快递'
          },
          {
            value: 9,
            name: '百世快递'
          },
        ],
        dialogModifyVisible: false,
        getOrderDetail: '',
        formModify: {
          consignee: '',
          phone: '',
          address: '',
          order_amount: '',
          discount: '',
          is_paid: false,
          payment_method: ''
        },
        paymentMethod: [{
            value: 1,
            name: '微信支付'
          },
          {
            value: 2,
            name: '支付宝支付'
          },
          {
            value: 3,
            name: '银联支付'
          },
          {
            value: 4,
            name: '线下支付'
          }
        ],
        order: {
          orderNumber: '2021001',
          customerName: '张三',
          amount: '100',
          items: [{
              id: 1,
              name: '商品1',
              price: '10',
              quantity: '3',
              subtotal: '30'
            },
            {
              id: 2,
              name: '商品2',
              price: '20',
              quantity: '2',
              subtotal: '40'
            },
            {
              id: 3,
              name: '商品3',
              price: '15',
              quantity: '5',
              subtotal: '75'
            }
          ],
          total: '145'
        }
      }
    },
    created() {
      this.getOrderList()
    },
    computed: {
      formattedDate() {
        if (this.getDate) {
          const dateObject = new Date(this.getDate)
          return dateObject.toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
          }).replace(/\//g, '-')
        }
        return null
      }
    },
    methods: {
      handleClick(tab, event) {
        if (tab.paneName == 'first') {
          this.queryInfo = {}
          this.getOrderList()
        } else if (tab.paneName == 'isPaid') {
          this.queryInfo.is_paid = 'True'
          this.queryInfo.freight_stata = ''
          this.getOrderList()
        } else if (tab.paneName == 'freightStata') {
          this.queryInfo.freight_stata = 'False'
          this.queryInfo.is_paid = 'True'
          this.getOrderList()
        }
      },
      clickQuery() {
        this.queryInfo.date = this.formattedDate
        console.log(this.queryInfo.date);
        this.getOrderList()
      },
      getOrderList() {
        this.$get(orderListUrl, this.queryInfo).then(res => {
          if (res.data.code == 200) {
            this.orderList = res.data.data.list
            this.orderTotal = res.data.data.total
          }
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.pageSize = newSize
        this.getOrderList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getOrderList()
      },
      handleDelete(orderId) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(orderDeleteUrl + orderId + '/').then(res => {
            if (res.data.code == 200) {
              this.getOrderList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      sendOut(item) {
        this.dialogSendOutVisible = true
        this.sendOutStatus = true
        this.$get(orderDetailUrl + item.id + '/').then(res => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data
            this.formSendOut = {
              freight_company: res.data.data.freight_company,
              freight_number: res.data.data.freight_number
            }
          }
        })
      },
      sendOutDetail(item) {
        this.dialogSendOutVisible = true
        this.sendOutStatus = false
        this.$get(orderDetailUrl + item.id + '/').then(res => {
          if (res.data.code == 200) {
            this.orderDetail = res.data.data
            this.formSendOut = {
              freight_company: res.data.data.freight_company,
              freight_number: res.data.data.freight_number
            }
          }
        })
      },
      sendOutGoods(orderId) {
        this.formSendOut.freight_stata = true
        this.$patch(orderPatchUrl + orderId + '/', this.formSendOut).then(res => {
          if (res.data.code == 200) {
            if (this.sendOutStatus) {
              this.$message({
                type: 'success',
                message: '发货成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
            }
            this.formSendOut = {}
            this.dialogSendOutVisible = false
            this.getOrderList()
          }
        })
      },
      modifyOrder(item) {
        this.dialogModifyVisible = true
        this.$get(orderDetailUrl + item.id + '/').then(res => {
          if (res.data.code == 200) {
            this.getOrderDetail = res.data.data
            this.formModify = {
              consignee: res.data.data.consignee,
              phone: res.data.data.phone,
              address: res.data.data.address,
              order_amount: res.data.data.order_amount,
              discount: res.data.data.discount,
              is_paid: res.data.data.is_paid,
              payment_method: res.data.data.payment_method
            }
          }
        })
      },
      modifyOrderPatch(orderId) {
        this.$patch(orderPatchUrl + orderId + '/', this.formModify).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '发货成功!'
            })
            this.formModify = {}
            this.dialogModifyVisible = false
            this.getOrderList()
            console.log(res.data);
          }
        })
      },
      printOrder(orderId){
        this.$router.push({
          path: '/productOrder/printOrder',
          query: {
            orderId: orderId // 添加第二个参数
          }
        });
      }
    }
  }
</script>

<style>
  .demo-table-expand {
    margin-left: 35px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 30%;
  }
</style>
